<template>
  <div class="tabbar">
    <!-- mark就是每个item组件的名称 -->
    <item title="我的" mark="nav1" :curr="curr" @change="getVal">
      <img slot="normalImg" src="../assets/images/1.png" alt="" />
      <img slot="activeImg" src="../assets/images/1s.png" alt="" />
    </item>
    <item title="流程" mark="nav2" :curr="curr" @change="getVal">
      <img slot="normalImg" src="../assets/images/2.png" alt="" />
      <img slot="activeImg" src="../assets/images/2s.png" alt="" />
    </item>
    <item title="首页" mark="nav3" :curr="curr" @change="getVal">
      <img slot="normalImg" src="../assets/images/3.png" alt="" />
      <img slot="activeImg" src="../assets/images/3s.png" alt="" />
    </item>
    <item title="应用" mark="nav4" :curr="curr" @change="getVal">
      <img slot="normalImg" src="../assets/images/4.png" alt="" />
      <img slot="activeImg" src="../assets/images/4s.png" alt="" />
    </item>
  </div>
</template> 
<script>
import item from "./01item.vue";
export default {
  components: { item },
  data() {
    return {
      // 记录当前选中的导航的名称
      curr: "nav4",
    };
  },
  methods: {
    getVal(val) {
      this.curr = val;
    },
  },
};
</script>  
<style lang="less" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  text-align: center;
  border-top: 1px solid gray;
  padding-top: 20px;
}
</style>